<template>
  <view class="page">
    <!-- 自定义页面头部 -->
    <!-- <CustomTop
      title="我的"
      background="linear-gradient(180deg, #ccffff 50%, #f7f8fa 100%)"
    /> -->
    <!-- 用户信息 -->
    <view class="box">
      <view class="box_top">
        <view class="user" @tap="onTapUser">
          <view class="user_img">
            <image :src="userHeadImg" />
          </view>
          <view class="user_name">{{ $userStore.userInfo.nickname }}</view>
        </view>
        <!-- <view class="set" @tap="onClear">
          <image :src="ImgIconSetGray" />
          <view class="set_text">设置</view>
        </view> -->
      </view>
    </view>
    <!-- cards -->
    <!-- <view class="card cardbox">
      <view
        class="cardbox_item"
        v-for="(item, index) of cards"
        :key="index"
        @tap="onCheckModule(item)"
      >
        <view class="flex justify-center"><image :src="item.icon" /></view>
        <view class="cardbox_title">{{ item.title }}</view>
      </view>
    </view> -->
    <!-- 轮播图 -->
    <view class="margin" v-if="$data.imgList && $data.imgList.length > 0">
      <up-swiper
        :list="$data.imgList"
        keyName="_picurl"
        height="280rpx"
        :radius="15"
        imgMode="scaleToFill"
        @click="onCheckImg"
      ></up-swiper>
    </view>
    <!-- 我的订单 -->
    <view class="card margin padding_card">
      <view class="title" @tap="onCheckModule(null, 'allorder')">我的订单</view>
      <view class="order">
        <view
          class="order_item"
          v-for="(item, index) of orderCards"
          :key="index"
          @tap="onCheckModule(item)"
        >
          <view class="flex justify-center"><image :src="item.icon" /></view>
          <view class="order_title">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <!-- 管理与服务 -->
    <view class="card margin padding_card">
      <view class="title">管理与服务</view>
      <view class="menu">
        <view
          class="menu_item"
          v-for="(item, index) of menuList"
          :key="index"
          @tap="onCheckModule(item)"
        >
          <view class="flex justify-center"><image :src="item.icon" /></view>
          <view class="menu_title text-nowarp">{{ item.title }}</view>
        </view>
      </view>
    </view>
    <view class="foot foot_box">
      <view class="btn btn_save" @tap="onClear">退出登录</view>
    </view>
    <PopupExchange v-model:show="$data.exchangeShow" />
    <PopupLogin />
  </view>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, nextTick, computed } from "vue";
import {
  onLoad,
  onShow,
  onHide,
  onReady,
  onPageScroll,
  onReachBottom,
  onPullDownRefresh,
  onShareAppMessage,
  onShareTimeline,
  onTabItemTap,
} from "@dcloudio/uni-app";
import BasicConfig from "../../utils/config";
import { useGetUserInfo } from "../../hooks/useUser";
import CustomTop from "../../components/CustomTop.vue";
import { ImgIconSetGray } from "../../utils/iconMap";
import errorCode from "../../utils/http/errorCode";
import { useUserStore } from "../../store/modules/user";
import { useGetTokenStorage, useGetUserStorage } from "../../hooks/useStorage";
import { cards, menuList, orderCards } from "./config";
import { jumpPage } from "../../utils/route/route";
import { useClickSwiperImg } from "../../hooks/useCommon";
import { useLogout } from "../../hooks/useLogin";
import { useImgSrc } from "../../hooks/useImg";
import { apiImgUrl, imgUrl } from "../../utils/env";
import PopupExchange from "../../components/PopupExchange.vue";
import { getRecommendDetail } from "../../api/Interface/recommend";
import { recommendApplyExamineStatus } from "../../enums/recommend";
const $userStore = useUserStore();
const Instance = getCurrentInstance();
const $vm = Instance?.appContext.config.globalProperties;
const $data = reactive({
  top: "",
  imgList: [],
  tabsPaddingTop: "",
  exchangeShow: false, // 兑换中心
});
const init = async () => {
  const { carousel } = useGetUserStorage();
  $data.imgList = carousel;
  $data.imgList.map((m) => (m._picurl = useImgSrc(m.cover)));
};
const onTapUser = () => {
  jumpPage({
    to: "/pages/my/update",
    login: true,
  });
};
const onCheckImg = (e) => {
  console.log("onCheckImg", e);
  useClickSwiperImg($data.imgList[e]);
};
const getUser = async () => {
  await useGetUserInfo();
};
const onCheckModule = (e, key) => {
  if (key === "allorder") {
    jumpPage({
      to: "/package-service/pages/order/order",
      login: true,
    });
    return;
  }
  // 推荐官
  if (e.key === "tjg") {
    getRecommendDetail().then((res) => {
      console.log("getRecommendDetail", res);
      // 无数据,还不是推荐官
      if (res.code === errorCode.nodata) {
        jumpPage({
          to: "/package-my/pages/recommend/index",
          login: true,
        });
      }
      // 有数据,是推荐官
      else if (res.code === errorCode.success) {
        const { data } = res;
        // 1.待审核 2.未通过 3.已通过
        switch (data.status) {
          case recommendApplyExamineStatus.await:
          case recommendApplyExamineStatus.notPass:
            jumpPage({
              to: "/package-my/pages/recommend/examine",
              login: true,
            });
            break;
          case 3:
            jumpPage({
              to: "/package-my/pages/recommend/income",
              login: true,
            });
            break;
          default:
            break;
        }
      }
    });
    return;
  }
  // 兑换中心
  if (e.key === "dh") {
    $data.exchangeShow = true;
    return;
  }
  if (!e.path) {
    BasicConfig.toast("稍后开放");
    return;
  }
  jumpPage({
    to: e.path,
    login: true,
  });
};
const userHeadImg = computed(() => {
  const isLogin = !!useGetTokenStorage();
  const avatar = $userStore.userInfo.avatar;
  const domain = isLogin && avatar !== "/logo.png" ? apiImgUrl : imgUrl;
  console.log("domain", domain);
  return useImgSrc($userStore.userInfo.avatar, domain);
});
/** TODO: 临时 清空缓存 */
const onClear = () => {
  uni.showModal({
    content: "确定退出并清空缓存?",
    success: (success) => {
      if (success.confirm) {
        useLogout();
      }
    },
  });
};
const onSet = () => {
  jumpPage({
    to: "/package-my/pages/setting/index",
    login: true,
  });
};
onLoad((options) => {});
onShow(() => {
  const token = useGetTokenStorage();
  if (token) {
    getUser();
    init();
  }
});
onReady(() => {});
onShareAppMessage(() => {});
onShareTimeline(() => {});
</script>

<style lang="scss" scoped>
.page {
  background: #f7f8fa;
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 300rpx;
  .box {
    padding: 30rpx;
    &_top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .user {
        display: flex;
        align-items: center;
        &_img {
          width: 160rpx;
          height: 160rpx;
          // background: green;
          border-radius: 100%;
          image {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }
        &_name {
          margin-left: 30rpx;
          font-size: 36rpx;
        }
      }
      .set {
        image {
          width: 40rpx;
          height: 40rpx;
        }
        &_text {
          font-size: 26rpx;
          text-align: center;
        }
      }
    }
  }
  .cardbox {
    margin: 30rpx 30rpx 0 30rpx;
    padding: 50rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &_item {
      width: calc(92% / 4);
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 100%;
      }
    }
    &_title {
      text-align: center;
      margin-top: 20rpx;
      font-size: 28rpx;
      color: #333333;
    }
  }
  .order {
    margin-top: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &_item {
      width: calc(90% / 5);
      image {
        width: 60rpx;
        height: 60rpx;
        border-radius: 100%;
      }
    }
    &_title {
      text-align: center;
      margin-top: 10rpx;
      font-size: 28rpx;
      color: #333333;
    }
  }
  .menu {
    margin-top: 30rpx;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    &_item {
      width: calc(91% / 4);
      margin-bottom: 30rpx;
      image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 100%;
      }
      &:not(:nth-of-type(4n)) {
        margin-right: 3%;
      }
    }
    &_title {
      text-align: center;
      margin-top: 10rpx;
      font-size: 26rpx;
      color: #333333;
    }
  }
}
.padding_card {
  padding: 50rpx 30rpx !important;
}
</style>
